<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>会议管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <link th:href="@{/css/update.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('会议管理')" />
    <link th:href="@{/css/meeting/iconfont.css}" rel="stylesheet"/>
    <link th:href="@{/css/meeting/projectPlanView.css}" rel="stylesheet"/>
    <th:block th:include="include :: select2-css" />

    <style>
        .laydate-time-list{padding-bottom:0;overflow:hidden}
        .laydate-time-list>li{width:50%!important;}
        .laydate-time-list>li:last-child { display: none;}
    </style>
</head>
<body>
<div class="xmTit">会议申请</div>
<form id="myform" th:object="${meeting}">
    <input type="hidden" name="id" th:field="*{id}"/>
    <div class="position-r">
        <div id="enable_edit" class="topFix"></div>
        <div class="xmlist clearfix">
            <div class="name">会议主题：</div>
            <input type="text" name="meetingTheme" autocomplete="off" th:field="*{meetingTheme}">
        </div>
        <div class="xmlist_line"></div>
        <div class="xmlist w50 clearfix">
            <div class="name">会议日期：</div>
            <input id="startDate" style="width: 95px;" type="text" name="applicationDate" autocomplete="off" th:field="*{applicationDate}"/>
            <span class="myfl displayIn" style="margin: 1px 5px;padding-top: 2px;">--</span>
            <input id="endDate" style="width: 120px;" type="text" name="applicationDateSecond" autocomplete="off" th:field="*{applicationDateSecond}"/>
            <div class="name">会议时间段：</div>
            <input id="startTime" style="width: 55px;" type="text" autocomplete="off" name="startTime" th:field="*{startTime}"/>
            <span class="myfl displayIn" style="margin: 1px 5px;padding-top: 2px;">--</span>
            <input id="endTime" style="width: 55px;" type="text" name="endTime" autocomplete="off" value="" th:field="*{endTime}"/>
        </div>
        <div class="xmlist_line"></div>
        <div class="xmlist w50 clearfix">
            <div class="name">会议室：</div>
            <div class="hys">
                <select id="meetingroom" class="form-control m-b" name="meetingRoom" th:with="type=${@dict.getType('sys_meeting_room')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}" th:field="*{meetingRoom}">-- 请选择 --</option>
                </select>
            </div>
        </div>
        <div class="xmlist_line"></div>
        <div class="xmlist w50 clearfix">
            <div class="name">参会人员：</div>
            <div class="hys">
                <select id="attendee" class="form-control select2-multiple" name="attendee" multiple>
                    <option th:each="user:${users}" th:value="${user.userId}" th:text="${user.userName}" th:selected="${user.flag}" th:disabled="${user.status == '1'}"></option>
                </select>
            </div>
        </div>

        <div class="xmlist_line"></div>
        <div class="xmlist w50 clearfix">
            <div class="name">备注：</div>
            <textarea name="remark" rows="3" th:field="*{remark}"></textarea>
        </div>
        <div class="xmlist_line"></div>
        <div class="text-c mt40 mb20">
            <button id="modifymeetingApplication" type="button" class="btn btn-primary">修改申请</button>
            <button id="delmeetingApplication" type="button" class="btn btn-primary">删除申请</button>
        </div>
        <div id="meetingroomInfo" class="ds" style="width: 90%;margin: 10px auto;">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>会议室</th>
                    <th>会议日期</th>
                    <th>会议时间段</th>
                    <th>会议主题</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</form>
<th:block th:include="include :: footer" />
<script th:src="@{/js/meeting/meetingApplication.js}"></script>
<script th:src="@{/js/meeting/moment.min.js}"></script>
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var id = "";
    var currentUser = [[${user}]];
    var meeting = [[${meeting}]];
    $(function init() {
        var $target = $('#modifymeetingApplication, #delmeetingApplication');
        var applicant = meeting.applicant
        var status = meeting.status
        //会议管理员
        var auditFlag = [[${@permission.hasPermi('meeting:application:audit')}]];
        if (auditFlag!='hidden') {
            $target.show();
            $('#enable_edit').hide();
        } else if(applicant == currentUser.userId && status == 1) {
            $target.show();
            $('#enable_edit').hide();
        }
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //时间选择器
            laydate.render({
                elem: '#startDate',
                max: $("#endDate").val()
                , type: 'date'
                ,done: function(value, date, endDate){queryMeetingRoomInfo()}
            });

            //时间选择器
            laydate.render({
                elem: '#endDate',
                min: $("#startDate").val()
                , type: 'date'
                ,done: function(value, date, endDate){queryMeetingRoomInfo()}
            });


            //时间选择器
            laydate.render({
                elem: '#startTime'
                , max: $("#endTime").val()
                , type: 'time'
                , format : 'HH:mm'
            });

            //时间选择器
            laydate.render({
                elem: '#endTime'
                , min: $("#startTime").val()
                , type: 'time'
                , format : 'HH:mm'
            });
        })
    });


    //申请提交
    $('#modifymeetingApplication').click(function () {
        var id = $("input[name='id']").val();
        var meetingTheme = $("input[name='meetingTheme']").val();
        var applicationDate = $("input[name='applicationDate']").val();
        var applicationDateSecond = $("input[name='applicationDateSecond']").val();
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        var meetingRoom = $("select[name='meetingRoom']").val();
        var remark = $("textarea[name='remark']").val();
        // var attendee = $("input[name='attendee']").val();
        if(meetingTheme == "" || meetingTheme == undefined){
            layer.alert("请填写会议主题");
            return false;
        }else if(applicationDate == "" || applicationDate == undefined){
            layer.alert("请填写申请日期");
            return false;
        }else if(startTime == "" || startTime == undefined){
            layer.alert("请填写申请时间");
            return false;
        }
        else if(endTime == "" || endTime == undefined){
            layer.alert("请填写申请时间");
            return false;
        }
        else if(!meetingRoom || meetingRoom == 0 ){
            layer.alert("请选择会议室");
            return false;
        }
        // else if(attendee == "" || attendee == undefined){
        //     layer.alert("请选择最低一位参加人员");
        //     return false;
        // }

        var start_hour = parseInt(startTime.split(":")[0]);
        var start_minute = parseInt(startTime.split(":")[1]);
        var end_hour = parseInt(endTime.split(":")[0]);
        var end_minute = parseInt(endTime.split(":")[1]);
        var start_minutes = start_hour * 60 + start_minute;
        var end_minutes = end_hour * 60 + end_minute;
        if (start_minutes >= end_minutes){
            layer.alert("申请开始时间不得大于或等于结束时间");
            return false;
        }
        if (applicationDateSecond != '' && moment(applicationDate).isAfter(applicationDateSecond, 'day')) {
            layer.alert("申请开始日期不得大于或等于结束日期");
            return false;
        }
        var param = {};
        param.meetingTheme = meetingTheme;
        param.applicationDate = applicationDate;
        param.applicationDateSecond = applicationDateSecond;
        param.startTime = startTime;
        param.endTime = endTime;
        param.meetingRoom = meetingRoom;
        param.remark = remark;
        param.id = id;
        $.ajax({
            url: '/meetingApplication/edit',
            data: JSON.stringify(param),
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            success: function (e) {
                if(e.code == 0){
                    layer.msg('修改成功', {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        var _iframe = window.parent.document;
                        var year = $(_iframe).find(".mycal .midData .ym .y").text();
                        var month = $(_iframe).find(".mycal .midData .ym .m").text() - 1;
                        var date = $(_iframe).find(".mycal .day .nowdate").text();
                        var v = new Date(year, month, date);
                        parent.draw_calander(v);
                        parent.layer.closeAll();
                        parent.load_audit_status();
                        parent.loadOtherData();
                    });
                }else{
                    layer.msg(e.msg, {
                        icon: 2,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }
            }
        });
    });

    //删除会议
    $('#delmeetingApplication').click(function () {
        var id = $("input[name='id']").val();
        layer.confirm('确定删除吗？',
            function(index){
                $.ajax({
                    url: '/meetingApplication/remove',
                    data: {'id': id},
                    type: 'post',
                    dataType: 'json',
                    success: function (e) {
                        if(e.code == 0){
                            layer.msg('删除成功', {
                                icon: 2,
                                time: 1000
                            }, function(){
                                var _iframe = window.parent.document;
                                var year = $(_iframe).find(".mycal .midData .ym .y").text();
                                var month = $(_iframe).find(".mycal .midData .ym .m").text() - 1;
                                var date = $(_iframe).find(".mycal .day .nowdate").text();
                                var v = new Date(year, month, date);
                                parent.draw_calander(v);
                                parent.layer.closeAll();
                                parent.load_audit_status();
                                parent.loadOtherData();
                            });
                        }
                    }
                });
            }, function(index){
                layer.close(index);
            });

    });


    function queryMeetingRoomInfo() {
        var applicationdate = $("input[name='applicationdate']").val();
        var applicationdateSecond = $("input[name='applicationdateSecond']").val();
        var meetingroom = $("[name='meetingroom']").val();
        if (applicationdate == '' || meetingroom == 0) {
            $('#meetingroomInfo').hide();
            return;
        }
        if (applicationdateSecond != '' && moment(applicationdate).isAfter(applicationdateSecond, 'day')) {
            layer.alert("申请开始日期不得大于结束日期");
            return ;
        }

        load_meetingroomInfo();
    }

    function load_meetingroomInfo() {
        $('#meetingroomInfo table tbody').empty();
        $('#meetingroomInfo').hide();
        var applicationdate = $("input[name='applicationdate']").val();
        var applicationdateSecond = $("input[name='applicationdateSecond']").val();
        var id = $("input[name='id']").val();
        var meetingroom = $("[name='meetingroom']").val();
        $.ajax({
            url: '/meetingApplication/queryMeetingRoomInfo',
            data: {'id': id,'applicationDate': applicationdate,'applicationDateSecond': applicationdateSecond, 'meetingRoom': meetingroom},
            dataType: 'json',
            success: function(e) {
                if (e.length > 0) {
                    var html = '';
                    $.each(e, function(index, item) {
                        html += '<tr>' +
                            '	<td>'+ item.meetingRoomName +'</td>' +
                            '	<td>'+ (item.applicationDate == item.applicationdateSecond ? item.applicationDate : (item.applicationDate + ' -- ' + item.applicationDateSecond)) +'</td>' +
                            '	<td>'+ item.startTime + '-' + item.endTime +'</td>' +
                            '	<td>'+ item.meetingTheme +'</td>' +
                            '</tr>';
                    });
                    $('#meetingroomInfo table tbody').append(html);
                    $('#meetingroomInfo').toggle();
                }
            }
        });
    };

    queryMeetingRoomInfo()
</script>
</body>
</html>